---
import Button from '../components/Button.astro';
import Menu from '../components/Menu.astro';
import Hero from '../components/Hero.astro';
import BaseHead from '../components/BaseHead.astro';
import BaseLayout from '../components/BaseLayout.astro';

let title = 'Snowpack';
let description = 'Snowpack is a lightning-fast frontend build tool, designed for the modern web.';
---

<!doctype html>
<html>
<head>
  <style lang="scss">
    @use '../../public/styles/var' as *;

    blockquote {
      margin: 1rem 0;
    }
    blockquote a {
      font-weight: bold;
    }
    .layout {
      display: grid;
      grid-template-areas: "main";

      @media (min-width: $breakpoint-m) {
        grid-template-areas: "nav main";
        grid-template-columns: 16rem auto;
      }

      &-nav {
        grid-area: nav;
      }

      &-main {
        grid-area: main;
      }
    }

    .top {
      text-align: left;
    }

    .img-banner {
      background: #f0db4f;
      display: block;
      text-align: center;

      img {
        max-width: min(32rem, 100%);
      }
    }

    .bullets {
      display: grid;
      grid-row-gap: 1em;
      grid-column-gap: 2em;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      margin: 2.5em 0 !important;
      padding: 0.1em !important;
      list-style: none;

      .bullet-heading {
        margin: 0 0 0.25em 0;
        font-size: 1.25em;
      }
    }

    .bullet {
      padding: 0.25em;
      border-radius: 4px;

      h3 {
        display: flex;
        align-items: center;

        &::before {
          content: "✅";
          font-size: 0.75em;
          display: block;
          margin-right: 0.5rem;
        }
      }
    }

    .buttons {
      margin: 2em 0;
      text-align: center;

      > * {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
      }
    }
  </style>
  <BaseHead title={title} description={description} permalink="TODO" />
</head>

<body>
  <BaseLayout>
    <Hero bar="{title}" />
    <div foo="{title}" class="wrapper" style="margin: 0 auto">
      <section class="layout pt6 pb6">
        <aside id="nav-primary" class="layout-nav">
          <Menu></Menu>
        </aside>

        <article class="layout-main">
          <a class="img-banner" href="https://osawards.com/javascript/2020" target="_blank"
            rel="noopener noreferrer">
            <img src="/img/JSAwardWinner.png" alt="2020 JavaScript Open Source Award Winner banner" />
          </a>

          <blockquote>
            <p><strong>Update (April 20, 2022):</strong> Snowpack is no longer actively maintained and is not recommended for new projects.</p>
            <p>Check out <a href="https://vitejs.dev/" rel="nofollow">Vite</a> for a well-maintained Snowpack alternative.<br>
            See also: <a href="https://esbuild.github.io/" rel="nofollow">esbuild</a>, <a href="https://parceljs.org/" rel="nofollow">parcel</a></p>
          </blockquote>

          <div class="markdown-body feature-list">
            <div class={'t' + 'o' + 'p'}>
              <h2 id="what-is-snowpack%3F">What is Snowpack?</h2>
              <p>
                <strong>Snowpack is a lightning-fast frontend build tool, designed
                  for the modern web.</strong>
                It is an alternative to heavier, more complex bundlers like
                webpack or Parcel in your development workflow. Snowpack
                leverages JavaScript's native module system (<a
                  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">known
                  as
                  ESM</a>) to avoid unnecessary work and stay fast no matter how big
                your project grows.
              </p>
              <p>
                Once you try it, it's impossible to go back to anything else.
              </p>
            </div>

            <ul class="bullets">
              <li class="bullet">
                <h3 class="bullet-heading">Instant startup</h3>
                Snowpack's unbundled web development server
                <strong>starts up in 50ms or less</strong>
                and stays fast in large projects.
              </li>
              <li class="bullet">
                <h3 class="bullet-heading">Build once, cache forever</h3>
                Snowpack never builds the same file twice. Powered by
                JavaScript’s native module system (ESM) in the browser.
              </li>
              <li class="bullet">
                <h3 class="bullet-heading">HMR feat. Fast Refresh</h3>
                No refresh required. See changes reflected instantly in the
                browser with
                <a href="/concepts/hot-module-replacement">HMR + Fast Refresh</a>
                for React, Preact & Svelte.
              </li>
              <li class="bullet">
                <h3 class="bullet-heading">Out-of-the-box support</h3>
                Enjoy Snowpack's built-in support for JSX, TypeScript, React,
                Preact, CSS Modules
                <a href="/reference/supported-files">and more.</a>
              </li>
              <li class="bullet">
                <h3 class="bullet-heading">Optimize for production</h3>
                Build for production with built-in optimizations and plugin
                support for your favorite bundlers.
              </li>
              <li class="bullet">
                <h3 class="bullet-heading">Plugins? Plugins!</h3>
                Babel? Sass? MDX? Browse the entire
                <a href="/plugins">Snowpack Plugin Catalog</a>
                to connect your favorite build tool (or
                <a href="/reference/plugins">create your own!</a>)
              </li>
            </ul>

            <div class="buttons">
              <a href="/tutorials/quick-start"><Button style="primary">Get started</Button></a>
              <a href="/concepts/how-snowpack-works"><Button>Learn more</Button></a>
            </div>
          </div>
        </article>
      </section>
    </div>
  </BaseLayout>
  <!-- Place this tag in your head or just before your close body tag. -->
  <script async="async" defer="defer" src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
